<template>
  <section>
    <div class="container">
      <div class="container-title">查询条件</div>
      <div class="container-body pd">
        <el-form
          label-position="right"
          label-width="100px"
          ref="searchForm"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="卡包编号：" prop="cardBagNumber">
                <el-input
                  v-model="searchForm.cardBagNumber"
                  placeholder="请输入卡包编号"
                    prefix-icon="el-icon-search"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-button
              class="is-tableBtn"
              size="small"
              @click="clearForm('searchForm')"
              >清空</el-button
            >
            <el-button
              class="is-tableBtn"
              type="primary"
              size="small"
              @click="onSearch(searchForm)"
              >查询</el-button
            >
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="container">
      <div class="container-title">卡包列表</div>
      <div class="container-body pd">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="cardBagNumber" label="卡包编号" align="center">
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center">
          </el-table-column>
          <el-table-column
            prop="isActivation"
            label="是否激活"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.isActivation ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isExchange"
            label="是否兑换"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.isExchange ? "是" : "否" }}</template
            >
          </el-table-column>
          <el-table-column
            prop="isFrozen"
            label="是否冻结"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.isFrozen ? "是" : "否" }}</template
            >
          </el-table-column>
          <el-table-column prop="num" label="卡数量" align="center">
          </el-table-column>
           <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button
                class="btnwarning"
                type="warning"
                size="mini"
                @click="handleEdit(scope.row.cardBagNumber)"
                >获取小程序码</el-button
              >
            </template>
          </el-table-column>
        </el-table>
         <div class="pageBox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          >
          </el-pagination>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <el-dialog title="小程序码" :visible.sync="showWxCode" width="30%">
      <div class="codeImgBox">
        <img :src="codeImg" class="codeImg" alt="">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showWxCode=false">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      total: 0,
      tableData: [],
      options: [
        {
          value: "0",
          label: "否",
        },
        {
          value: "1",
          label: "是",
        },
      ],
      showWxCode: false,
      searchForm: {
        cardBagNumber: "",
        goodsName: "",
        isActivation: "",
        isExchange: "",
        isFrozen: "",
        num: "",
      },
      codeImg: '', // 小程序码
    };
  },
  created() {
    this.onSearch(this.searchForm);
  },
  methods: {
    clearForm(formName) {
      // 清空筛选
      this.$refs[formName].resetFields();
    },
    onSubmit() {},
    currentPage(page) {
      this.page = page;
      this.onSearch(this.searchForm);
    },
    async handleEdit(cardBagNumber){
      const loading = this.$loading({
        lock: true,
        text: '图片生成中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      // 请求案例
      let blob = await this.$store.dispatch("getWxCode", {
        cardBagNumber: cardBagNumber
      });
      let that = this
      if (blob) {
        let img = 'data:image/png;base64,' + blob
        this.codeImg = img
        this.showWxCode = true
        loading.close()
      } else {
        this.$message.error(res.ErrorMessage || '网络异常');
        loading.close()
      }
    },
    blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result);
        };
        // readAsDataURL
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error('blobToBase64 error'));
        };
      });
    },
    arrayBufferToBase64 (buffer) {
      var binary = ''
      var bytes = new Uint8Array(buffer)
      var len = bytes.byteLength
      for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      return window.btoa(binary)
    },
    async onSearch(searchForm) {
      this.loading = true;
      let skip = (this.page - 1) * 10;
      // 请求案例
      let res = await this.$store.dispatch("GetTbCardCardBagNumberList", {
        cardBagNumber: searchForm.cardBagNumber,
        goodsName: searchForm.goodsName,
        isActivation: searchForm.isActivation,
        isExchange: searchForm.isExchange,
        isFrozen: searchForm.isFrozen,
        num: searchForm.num,
        skip,
      });
      if (res.success) {
        this.tableData = res.data.itmes || [];
        this.total = res.data.totalCount;
      } else {
        this.$message.error(res.ErrorMessage || '网络异常');
      }
      this.loading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/varibles.scss";
.btnAdd {
  margin-bottom: $btnHeight;
  color: $btnwarning;
}
.btnwarning {
  color: $btnwarning;
}
.pageBox {
  padding-top: 10px;
  clear: both;
  .el-pagination {
    float: right;
  }

  .clear {
    clear: both;
  }
}
.codeImgBox{
  text-align: center;
}
.codeImg{
  width: 200px;
  height: 200px;
}
</style>
